<template>
	<view>
		<click-input preIcon="map-pin-ellipse" :disabled="readonly" :placeholder="$t(formProps.placeholder)?$t(formProps.placeholder):'请选择省市区'"
			@click="chooseLocation" :value="props.modelValue">
		</click-input>
		<cc-selectDity :province="area.province" :city="area.city" :area="area.area" :show="show"
			@sureSelectArea="selectOk" @hideShow="show = false" @changeClick="change"></cc-selectDity>
	</view>
</template>

<script setup>
	import { ref, computed, reactive } from 'vue'
	import ClickInput from '@/components/ClickInput.vue'

	const props = defineProps({
		formProps: {
			type: Object,
			default: () => {
				return {}
			}
		},
		modelValue: String,
		readonly: Boolean
	})

	// const province = ref('广东省')
	// const city = ref('广州市')
	// const area = ref('天河区')

	const area = reactive({
		province: '江西省',
		city: '南昌市',
		area: '南昌县'
	})

	const _value = computed({
		get() {
			if ((props.modelValue || '').trim() === '') {
				return null
			} else {
				const v = props.modelValue.split('-')
				area.province = v[0]
				area.city = v[1]
				area.area = v[2]
				return v
			}
		},
		set(val) {
			emits('update:modelValue', val)
		}
	})

	const emits = defineEmits(['update:modelValue'])

	const show = ref(false)

	function chooseLocation() {
		if (!props.readonly) {
			show.value = true
		}
	}

	function selectOk(e) {
		const data = e.detail.target.dataset
		_value.value = `${data.province}-${data.city}-${data.area}`
		show.value = false
	}

	function change(p, c, a) {
		area.province = p
		area.city = c
		area.area = a
	}
</script>

<style lang="less" scoped>
</style>